<template>
  <div class="login-container columnCC">
    <el-form ref="refLoginForm" class="login-form" :model="subForm">
      <div class="title-container"><h3 class="title text-center">vue3-admin-plus</h3></div>
      <el-form-item prop="keyword" :rules="formRules.isNotNull('用户名不能为空')">
        <el-input v-model="subForm.keyword" placeholder="用户名(panda)" />
      </el-form-item>
      <el-form-item prop="password" :rules="formRules.isNotNull('密码不能为空')">
        <el-input
          ref="refPassword"
          v-model="subForm.password"
          placeholder="password(123456)"
          @keyup.enter="handleLogin"
        />
      </el-form-item>
      <div class="tip-message">{{ tipMessage }}</div>
      <el-button :loading="subButtonLoading" type="primary" class="login-btn" @click.prevent="handleLogin">
        Login
      </el-button>
    </el-form>
  </div>
</template>
<script setup lang="ts" name="Login">
import {loginReq} from "@/api/system"
//rule valid
const formRules = {
  isNotNull: (msg) => [{ required: true, message: `${msg}`, trigger: 'blur' }]
}
const subForm = reactive({
  keyword: 'test',
  password: '666666'
})
const subButtonLoading = ref(false)
//tip message
const tipMessage = ref('')
//sub form
const refLoginForm = ref()
const handleLogin = () => {
  refLoginForm.value.validate((valid) => {
    subButtonLoading.value = true
    if (valid) loginFunc()
  })
}

const loading = ref(false)
const router = useRouter()
const basicStore = useBasicStore()
const loginFunc = () => {
  loginReq(subForm)
      .then(({ data }) => {
        elMessage('登录成功')
        basicStore.setToken(data?.jwtToken)
        router.push('/')
      })
      .catch((err) => {
        tipMessage.value = err?.msg
      })
}
</script>
